<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
</head>
<body class="body">

<fieldset class="layui-elem-field layui-field-title">
    <legend>
        <span class="layui-breadcrumb">
            <a href="javascript:;">扩展</a>
            <a><cite>data-table</cite></a>
        </span>
    </legend>
</fieldset>

<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <a class="layui-btn btn-add btn-default" id="btn-add-article">添加</a>
    </span>
    <span class="fr">
        <span class="layui-form-label">搜索条件：</span>
        <div class="layui-input-inline">
            <input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
        </div>
        <button class="layui-btn mgl-20">查询</button>
    </span>
</div>

<table id="dateTable" class="layui-table">
    <thead>
    <tr>
        <th><input type="checkbox" class="my-checkbox" /></th>
        <th>账号</th>
        <th>角色</th>
        <th>最后登录时间</th>
        <th>最后登录IP</th>
        <th>创建时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/javascript" src="../frame/layui/layui.js"></script>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    // 配置
    layui.config({
        base: './../frame/static/js/'   // 模块目录
    }).extend({                         // 模块别名
        vip_table: 'vip_table'
    });

    // layui方法
    layui.use(['form','layer','vip_table'], function(){

        // 操作对象
        var form           = layui.form()
        ,layer          = layui.layer
        ,vipTable       = layui.vip_table
        ,$              = layui.jquery;

        // 初始化表格
        $('#dateTable').DataTable({
            "dom": '<"top">rt<"bottom"flp><"clear">',
            "autoWidth": false,                     // 自适应宽度
            "stateSave": true,                      // 刷新后保存页数
            "order": [[ 1, "desc" ]],               // 排序
            "searching": false,                     // 本地搜索
            "info": true,                           // 控制是否显示表格左下角的信息
            "stripeClasses": ["odd", "even"],       // 为奇偶行加上样式，兼容不支持CSS伪类的场合
            "aoColumnDefs": [{                      // 指定列不参与排序
                "orderable": false,
                "aTargets": [0,6]                   // 对应你的表格的列数
            }],
            "pagingType": "simple_numbers",         // 分页样式 simple,simple_numbers,full,full_numbers
            "language": {                           // 国际化
                "url":'./../json/language.json'
            },
            "ajax": {
                "url": "./../json/data_table.json" // ajax
            },
            "sServerMethod" : "POST",               // POST
            "deferRender": true,                    // 当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
            "columns": [                            // 自定义数据列
                {data:function(obj){                // 后台需要返回[data=>['id'=>1,ip=>0.0.0.0]]这样的数据
                    return '<input type="checkbox" class="my-checkbox" lay-filter="oneChoose" data-id="'+obj.id+'"/>';
                }},
                {data: 'account'},
                {data: 'auth_group_name'},
                {data: 'last_login_ip'},
                {data: 'last_login_time'},
                {data: 'create_time'},
                {data: function(obj){
                    return  '<a class="layui-btn layui-btn-small btn-edit" data-id="'+obj.id+'">查看</a>' +
                            '<a class="layui-btn layui-btn-small layui-btn-normal btn-edit" data-id="'+obj.id+'">编辑</a>' +
                            '<a class="layui-btn layui-btn-small layui-btn-danger btn-edit" data-id="'+obj.id+'">删除</a>';
                },width:'155'}
            ],
            "stateSaveParams": function () {           // 初始化完成调用事件
                // 重新渲染form checkbox 如果你要使用layui的复选框样式打开这个
                // form.render('checkbox');
            }
        });

        // 例:获取ids
        $(document).on('click','#btn-delete-all', function(){
            // getIds(table对象,获取input为id的属性)
            var list = vipTable.getIds($('#dateTable'),'data-id');
            if(list == null || list == ''){
                layer.msg('未选择');
            }else{
                layer.msg(list);
            }
        });

        // you code ...


    });
</script>
</body>
</html>